<template>
	<view>
		<view class="input-view">
			<view class="mobile-title util-font-medium">手机号码</view>
			<input class="mobile-input util-font-medium" placeholder-class="util-font-medium input-placeHolder" type="number" placeholder="请输入手机号码" @input="mobileInput"/>
		</view>
		<view class="input-view">
			<view class="code-title util-font-medium">验证码</view>
			<input class="code-input util-font-medium" placeholder-class="util-font-medium input-placeHolder" type="number" placeholder="请输入验证码" @input="codeInput" />
			<view class="code-button util-font-medium" @click="getMessage">{{codeMsg}}</view>
		</view>
		<view class="login-button util-font-medium" :style="{backgroundColor: beVerified()?'#333333':'#d6d6d6'}" @click="confirm">确认</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				codeMsg: "获取验证码",
				codeTime: 0,
				codeTimer: null,
				
				mobile: '',
				code: '',
			}
		},
		onHide() {
			clearInterval(that.codeTimer)
		},
		methods: {
			beVerified: function(){
				if (this.mobile.length == 0) {
					return false;
				}
				if (!(/^1[3-9]\d{9}$/.test(this.mobile))) {
					return false;
				}
				if (this.code.length == 0) {
					return false;
				}
				if (!(/^\d{6}$/.test(this.code))) {
					return false;
				}
				return true;
			},
			mobileInput: function(event){
				this.mobile = event.detail.value
			},
			codeInput: function(event){
				this.code = event.detail.value
			},
			getMessage: function(){
				var that = this
				
				if (that.codeTime > 0) {
					return;
				}
				
				if (that.mobile.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '请输入手机号',
					});
					return
				}
				if (!(/^1[3-9]\d{9}$/.test(that.mobile))) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的手机号',
					});
					return
				}
				that.sendRequest({
					url: 'app/appUser/sendLoginSms/' + that.mobile,
					method: 'POST',
					header: that.$urlRequest.getHeader('token'),
					success: function(res){
						if (res.data.code == 0) {
							uni.showToast({
								icon: 'none',
								title: '验证码已发送，请查收！'
							});
							that.codeTime = 60
							that.codeMsg = "剩余"+that.codeTime+"s"
							that.codeTimer = setInterval(function(){
								if (that.codeTime > 1) {
									that.codeTime -= 1
									that.codeMsg = "剩余"+that.codeTime+"s"
									
								}else{
									that.codeTime = 0
									that.codeMsg = "获取验证码"
									clearInterval(that.codeTimer)
								}
							}, 1000)
						}else{
							uni.showToast({
								title: res.data.msg
							})
						}
					}
				})
			},
			confirm: function(){
				var that = this
				if (that.mobile.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '请输入手机号',
					});
					return
				}
				if (!(/^1[3-9]\d{9}$/.test(that.mobile))) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的手机号',
					});
					return
				}
				if (that.code.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '请输入验证码',
					});
					return
				}
				if (!(/^\d{6}$/.test(that.code))) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确验证码',
					});
					return
				}
				
				var userInfo = uni.getStorageSync('userInfo')
				that.sendRequest({
					url: 'app/appUser/bindPhone',
					method: 'POST',
					header: that.$urlRequest.getHeader('token', 'json'),
					data: {
						id: userInfo.id,
						phone: that.mobile,
						code: that.code
					},
					success: function(res){
						if (res.data.code == 0) {
							uni.showModal({
								content: '' + '绑定成功',
								showCancel: false
							});
							userInfo.phone = that.phone
							uni.navigateBack({
								
							})
						}else{
							uni.showModal({
								content: '' + res.data.msg,
								showCancel: false
							});
						}
						
					}
				})
			}
		},
		onLoad() {
			this.requestData = uni.getStorageSync('wxUserInfoData');
			uni.removeStorageSync('wxUserInfoData')
		}
	}
</script>

<style>
	.title {
		margin: 60upx 55upx 0upx;
		color: #333333;
		font-size: 60upx;
	}
	
	.title_tips {
		margin: 0 55upx 50upx;
		font-size: 32upx;
		color: #999999;
	}
	
	.input-view {
		width: 640upx;
		height: 205upx;
		margin: 0upx 55upx;
		border-bottom: 2upx solid #DDDDDD;
		overflow: hidden;
	}
	
	.mobile-title {
		margin-top: 40upx;
		height: 45upx;
		font-size: 28upx;
		color: #333333;
	}
	
	.mobile-input {
		font-size: 34upx;
		height: 120upx;
		line-height: 120upx;
		color: #333333;
	}
	
	.code-title {
		margin-top: 40upx;
		height: 45upx;
		font-size: 28upx;
		color: #333333;
	}
	
	.code-input {
		font-size: 34upx;
		height: 120upx;
		line-height: 120upx;
		color: #333333;
		float: left;
	}
	
	.input-placeHolder {
		color: #DDDDDD;
		font-size: 34upx;
	}
	
	.code-button {
		font-size: 28upx;
		height: 120upx;
		line-height: 120upx;
		color: #BBBBBB;
		float: right;
		width: 200upx;
		text-align: right;
	}
	
	.login-button {
		width: 640upx;
		height: 110upx;
		line-height: 110upx;
		font-size: 32upx;
		color: #FFFFFF;
		text-align: center;
		border-radius: 20upx;
		margin: 100upx 55upx;
	}
	
</style>
